<template>
  <div class="chat-container">
    <!-- 聊天消息列表 -->
    <div class="message-list" ref="messageList">
      <div v-for="msg in messages" 
           :key="msg.id" 
           :class="['message', { 'self': msg.senderId === teacherId }]">
        <div class="message-content">{{ msg.content }}</div>
        <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
      </div>
    </div>

    <!-- 输入框 -->
    <div class="input-area">
      <input v-model="inputContent" 
             @keyup.enter="sendMessage" 
             placeholder="请输入消息..."/>
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const messages = ref([])
const inputContent = ref('')
const websocket = ref(null)
const teacherId = ref(localStorage.getItem('teacherId'))

// 连接WebSocket
const connectWebSocket = () => {
  websocket.value = new WebSocket(`ws://localhost:8080/websocket/chat?userId=${teacherId.value}`)
  
  websocket.value.onopen = () => {
    console.log('WebSocket连接已打开')
  }
  
  websocket.value.onmessage = (event) => {
    const message = JSON.parse(event.data)
    messages.value.push(message)
    scrollToBottom()
  }
  
  websocket.value.onclose = () => {
    console.log('WebSocket连接已关闭')
  }
}

// 发送消息
const sendMessage = () => {
  if (!inputContent.value.trim() || !websocket.value) return
  
  const message = {
    senderId: teacherId.value,
    receiverId: route.query.studentId,
    content: inputContent.value,
    timestamp: Date.now(),
    courseId: route.query.courseId
  }
  
  websocket.value.send(JSON.stringify(message))
  messages.value.push({
    ...message,
    isSelf: true
  })
  
  inputContent.value = ''
  scrollToBottom()
}

// 滚动到底部
const messageList = ref(null)
const scrollToBottom = () => {
  setTimeout(() => {
    if (messageList.value) {
      messageList.value.scrollTop = messageList.value.scrollHeight
    }
  }, 100)
}

// 格式化时间
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString()
}

onMounted(() => {
  connectWebSocket()
})

onUnmounted(() => {
  if (websocket.value) {
    websocket.value.close()
  }
})
</script>

<style scoped>
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  margin-bottom: 20px;
}

.message.self {
  text-align: right;
}

.message-content {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 4px;
  background: #f5f5f5;
  max-width: 70%;
}

.message.self .message-content {
  background: #007AFF;
  color: white;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.input-area {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}
</style> 